<template>
  <select class="client-status" v-model="statusValue">
    <option v-for="option in options" :value="option.key">{{ option.value }}</option>
  </select>
</template>

<script>
  import store from '../store'
  import {showDialog, hideDialog} from '../lib/dialog'
  import {cleanClient} from '../lib/client'

  export default {
    props: {
      client: {
        require: true
      }
    },
    data() {
      return {
        options : [],
        statusValue : {
          default: 'INT'
        }
      }
    },

    methods: {
      isEqual (status, value) {
        return status === value
      }
    },
    components: {

    },
    watch: {
      statusValue(value) {
        if(value === 'default' || !value || value === this.client.custom_status) return true

        if(this.alterId) clearTimeout(this.alterId)
        this.$vux.loading.show({
          text: '请稍等...'
        })
        this.alterId = setTimeout(() => {
          let client = this.client
          client.custom_status = value
          let data = cleanClient(client, this.loginUser)
          store.dispatch('saveClientInfo', data)
            .then((reseponse) => {
              this.$vux.loading.hide()
              if(reseponse.data.errcode === 0) {
                this.client.custom_status = value
                showDialog(reseponse.data.errmsg)
              } else {
                showDialog(reseponse.data.errmsg)
              }
              setTimeout(() => {
                hideDialog()
              }, 1500)
            })
        }, 300)
      },

      client () {
          if(!this.client.custom_status) this.statusValue = 'default'
          else this.statusValue = this.client.custom_status
      }
    },
    computed: {
      clientStatuses () {
        return this.$store.state.app.customStatusOptions
      },
      loginUser () {
        console.log(JSON.stringify(this.$store.state.app.user))
        return this.$store.state.app.user
      }
    },
    mounted () {
      let statuses = [{key:'default', value:'请选择跟进状态'}].concat(this.clientStatuses)
      this.options = statuses

      // showDialog(store, '后台发生了点小问题，请联系管理员!')
    }

  }
</script>

<style lang="less">
  .client-status {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    display: inline-block;
    opacity: 0;
  }

</style>
